JObj.use('JAnimate');
!JObj.Plugin && (JObj.Plugin = {});
JObj.Plugin.JGallery = {};

(function($){

    var Gallery = function(width,height,body){
        var self = this;

        self.onFocus = null;

        var vars = {
            skin:'JGalleryDefault',
            width: JObj.isRate(width) ? width : (!isNaN(width) ? width + "px" : "150px"),
            height: JObj.isRate(height) ? height : (!isNaN(height) ? height + "px" : "300px"),
            thumbHeight : 50,
            thumbWidth : 50,
            showFlag:0,
            datas:[]
        };

        var objs = {
            datasource:null,
            body:JObj.$(body) || document.body,
            outline:null,
            iconBar:null,
            descBar:null,
            thumbs:null,
            thumbsInner:null,
            arrowLeft:null,
            arrowRight:null,
            viewOuter:null,
            viewInner:null,
            l1:null,
            l2:null,
            curr:null,
            ani:null,
            ani2:null,
            thumbsAni:null,
            preloadImgs:[]
        };

        self.setSkin = function(skin){
            vars.skin = skin;
            objs.outline && (objs.outline.className = skin ) ;
        }

        self.bindXML = function(xs){
            objs.datasource = JObj.Xml.loadXML(xs);
            build();
        }

        self.bindXMLFile = function(xf){
            JObj.Ajax.send({
                url:xf,

                onSuccess:function(http,status){
                    if(JObj.Browser.ie && http.status == 0 && http.responseText != "" && http.responseXML.xml == ""){
                        objs.datasource = JObj.Xml.loadXML(http.responseText);
                    }else
                        objs.datasource = http.responseXML;

                    build();
                }
            });
        }

        var arrowRight_click = function(){
            objs.thumbsAni && objs.thumbsAni.abort();
            var l = parseInt(objs.thumbsInner.style.left) || 0;
            objs.thumbsAni = JObj.UI.JAnimate.$(objs.thumbsInner);
            objs.thumbsAni.run({left:l},{left:l - objs.thumbs.clientWidth })            
        }

        var arrowLeft_click = function(){
            objs.thumbsAni && objs.thumbsAni.abort();
            var l = parseInt(objs.thumbsInner.style.left) || 0;
            objs.thumbsAni = JObj.UI.JAnimate.$(objs.thumbsInner);
            objs.thumbsAni.run({left:l},{left:l + objs.thumbs.clientWidth})
        }

		var ie6_fitposition = function(){
			var o = objs.outline;
			setTimeout(function(){
							var w = parseInt(o.currentStyle.paddingRight) + parseInt(o.currentStyle.paddingLeft) + o.offsetWidth + "px";									
							objs.descBar && (objs.descBar.style.width = w) && objs.descBar.innerHTML == "" && (objs.descBar.style.fontSize = 0);
							objs.iconBar && (objs.iconBar.style.width = w);
							objs.descBar && objs.iconBar && (objs.descBar.style.bottom = parseInt(JObj.Dom.getRuntimeStyle(objs.iconBar,'bottom')) + objs.iconBar.offsetHeight + "px");
							},
						0);
		}
		
        var createOutline = function(){
            objs.outline = JObj.$c("DIV");
			//JObj.Browser.ie && JObj.Browser.version <= 6 && (objs.outline.onpropertychange = outline_onpropertychange);	
            objs.body.appendChild(objs.outline);
			JObj.Browser.ie && JObj.Browser.version <= 6 && ie6_fitposition();			
            objs.outline.className = vars.skin;
            objs.outline.style.width = vars.width;
            objs.outline.style.height = vars.height;
            objs.outline.style.position = "relative";

            objs.iconBar = JObj.$c("DIV");
            objs.outline.appendChild(objs.iconBar);
            objs.iconBar.className = 'iconBar';
            objs.iconBar.style.position="absolute";
            objs.iconBar.style.zIndex = 3;

            objs.descBar = JObj.$c("DIV");
            objs.outline.appendChild(objs.descBar);
            objs.descBar.className = "descBar";
            objs.descBar.style.zIndex = 3;

            objs.arrowLeft = JObj.$c("DIV");
            objs.iconBar.appendChild(objs.arrowLeft);
            objs.arrowLeft.className = "arrowLeft";
            objs.arrowLeft.innerHTML = "&lt;";
            objs.arrowLeft.onclick = arrowLeft_click;

            objs.thumbs = JObj.$c("DIV");
            objs.iconBar.appendChild(objs.thumbs);
            objs.thumbs.className = "thumbs"

            objs.thumbsInner = JObj.$c("DIV");
            objs.thumbs.appendChild(objs.thumbsInner);
            objs.thumbsInner.className = 'thumbsInner';

            objs.arrowRight = JObj.$c("DIV");
            objs.iconBar.appendChild(objs.arrowRight);
            objs.arrowRight.className = "arrowRight";
            objs.arrowRight.innerHTML = "&gt;";
            objs.arrowRight.onclick = arrowRight_click;

            objs.viewOuter = JObj.$c('DIV');
            objs.outline.appendChild(objs.viewOuter);
            objs.viewOuter.className = 'viewOuter';
            
            objs.viewInner = JObj.$c('DIV');
            objs.viewOuter.appendChild(objs.viewInner);
            objs.viewInner.className = 'viewInner';
            
            objs.l1 = JObj.$c("DIV");
            objs.viewInner.appendChild(objs.l1);
            objs.l2 = JObj.$c("DIV");
            objs.viewInner.appendChild(objs.l2);
            objs.l1.className = "show";
            objs.l2.className = "show";
            objs.l1.style.zIndex = 1;
            objs.l2.style.zIndex = 2;
            
            JObj.Style.addRule('.' + vars.skin + ' .iconBar .thumbs a img','max-width:' + vars.thumbWidth + 'px');
            JObj.Style.addRule('.' + vars.skin + ' .show img','max-width:' + vars.width);

            if(objs.datasource)
                build();
        }
        
/*        	var ani_process = function(obj,fromRule){
        		if(fromRule.rule2Run != true && fromRule.alpha > 50){
        			fromRule.rule2Run = true;
        			objs.ani2.run({alpha:100},{alpha:0});
        		}
        	}*/

        self.setFocus = function(idx){
        	if(!vars.datas[idx]) return;
            var i = new Image();
            i.src = vars.datas[idx].big;

            var l = (vars.showFlag % 2) ? objs.l1 : objs.l2;
            var lo = (vars.showFlag % 2) ? objs.l2 : objs.l1;
            l.innerHTML = "";
            //l.appendChild(i);//����TT�ı�̬��Ӧ���Ҳ��ò�����������һ�� i ��Ȼ������������Ūһ�� innerHTML.
            var t = '<img src="' + vars.datas[idx].big + '" onload="if(this.width > ' + objs.outline.clientWidth + ') this.width = ' + objs.outline.clientWidth + '" />'
            if(vars.datas[idx].href && vars.datas[idx].href.trim() != ''){
                t = '<a href="' + vars.datas[idx].href.trim() + '" target="_blank">' + t + '</a>';
            }
            l.innerHTML = t;
			
			if(JObj.Browser.ie && JObj.Browser.version <= 6){
				objs.descBar.style.fontSize = vars.datas[idx].desc == '' ? '0' : '';
			}
			
            objs.descBar.innerHTML = vars.datas[idx].desc;

            vars.showFlag ++;

            objs.curr && (objs.curr.style.zIndex = 1);
            l.style.zIndex = 2;

            objs.curr = l;

            objs.ani = JObj.UI.JAnimate.$(l);
            objs.ani2 = JObj.UI.JAnimate.$(lo);
            //objs.ani.run({height:0,alpha:0,width:0},{height: parseInt(vars.height),alpha:100,width:parseInt(vars.width)});
            //	objs.ani.onProcess = ani_process;
            l.style.left = "3px";
            l.style.top = "3px";
				objs.ani.run({alpha:0,width:0},{alpha:100,width:parseInt(vars.width)});
				//objs.ani2.run({alpha:100,width:parseInt(vars.width)},{alpha:0,width:10});
				objs.ani2.runFromCurrent({alpha:10,width:10,left:parseInt(vars.width),top:parseInt(vars.height)});
				delete i;
				delete l;

            JObj.isFunction(self.onFocus) && self.onFocus(vars.datas[idx]);
        }

        var ie6_iconresize =function(){//非IE6有 max-width
            if(this.width > vars.thumbWidth){
				var scale = this.width / vars.thumbWidth;
                this.width = vars.thumbWidth;
				this.height = this.height / scale;
			}
        }

        var delete_preloadImg = function(item){
            if(JObj.Browser.ie) return;
			
			delete this;
        }

        var build = function(){
            var root = objs.datasource.documentElement;
            var items = JObj.Xml.extractNodes(root);
            var item,i;
            var icon,img;

            delete vars.datas;
            vars.datas = [];
            
            objs.thumbsInner.innerHTML = "";
            objs.thumbsInner.style.left = "0px";

            var preLoadImg = null;

            for(i=0;item = items[i];i++){
                var desc = item.getElementsByTagName('desc')[0].text || item.getElementsByTagName('desc')[0].textContent || '';//.text ie6
                vars.datas.push({big:JObj.Xml.getNodeAtt(item,'big'),href:JObj.Xml.getNodeAtt(item,'href'),title:JObj.Xml.getNodeAtt(item,'title'),desc:desc});
                preLoadImg = new Image();
                objs.preloadImgs.push(preLoadImg);
                preLoadImg.onload = delete_preloadImg;
                preLoadImg.src = JObj.Xml.getNodeAtt(item,'big');

                icon = JObj.$c('A');
                icon.title = JObj.Xml.getNodeAtt(item,'title');
                icon.href = 'javascript:void(0)';
                icon.index = i;
                icon.onclick = JObj.doFunction(self.setFocus,i);

                img = new Image();
                if(JObj.Browser.ie && JObj.Browser.version <= 6)
                    img.onload =  ie6_iconresize;
                    
                img.src = JObj.Xml.getNodeAtt(item,'icon');
                icon.appendChild(img);

                objs.thumbsInner.appendChild(icon);
            }

            var w = (i + 5) * vars.thumbWidth;
            objs.thumbsInner.style.width = w > objs.thumbs.clientWidth ? w + "px" : "100%";
            objs.thumbs.style.width = objs.outline.clientWidth - 40 + "px";
            
            delete objs.datasource;
            self.setFocus(0);
        }

        self.create = function(){
            createOutline();
        }
    }

    $.getInstance = function(width,height,body){
        JObj.Loader.loadCss(JObj.path + '/plugins/JGallery/default/default.css');
        var ga = new Gallery(width,height,body);
        return ga;
    }

})(JObj.Plugin.JGallery);